<template>
  <mu-container>
    <h2>我要出题</h2>
    <mu-form :model="form" label-position="top" label-width="100">
      <!-- 题目形式 -->
      <mu-form-item prop="question_form" label="题目形式">
        <mu-radio v-model="form.question_form" :value="1" label="选择"></mu-radio>
        <mu-radio v-model="form.question_form" :value="2" label="填空"></mu-radio>
      </mu-form-item>
      <!-- 题目类型 -->
      <mu-form-item prop="select" label="题目类别">
        <mu-select v-model="form.question_type">
          <mu-option
            v-for="(option,i) in options"
            :key="i"
            :label="option.name"
            :value="option.id"></mu-option>
        </mu-select>
      </mu-form-item>
      <!-- 题面 -->
      <mu-form-item prop="ask" label="题面">
        <mu-text-field v-model="form.ask"></mu-text-field>
      </mu-form-item>
      <mu-form-item prop="graph" label="图片">
        <mu-radio v-model="formOptions.useGraph" :value="true" label="有图片"></mu-radio>
        <mu-radio v-model="formOptions.useGraph" :value="false" label="无图片"></mu-radio>
      </mu-form-item>
      <image-uploader v-show="formOptions.useGraph" ref="graph"></image-uploader>
      <!-- 选项 -->
      <mu-form-item v-if="isChoise" prop="question_form" label="选项">
        <options-manager ref="optionsManager" v-model="form.options" @choose="setAnswer"></options-manager>
      </mu-form-item>
      <!-- 答案 -->
      <mu-form-item prop="ask" label="答案">
        <mu-text-field :disabled="isChoise" v-model="form.answer"></mu-text-field>
      </mu-form-item>
    </mu-form>
    <mu-button v-loading="submitting" color="primary" @click="handleSubmit()">提交新题</mu-button>
  </mu-container>
</template>

<script>
import { mapGetters } from 'vuex'
import { createQuestion, updateGraph } from '@/api/questions'
import OptionsManager from './OptionsManager'
import ImageUploader from './ImageUploader'

export default {
  name: 'QuestionForm',
  components: {
    OptionsManager,
    ImageUploader
  },
  data() {
    return {
      formOptions: {
        useGraph: false
      },
      form: {
        question_form: 1,
        question_type: 1,
        ask: '',
        options: [],
        answer: ''
      },
      submitting: false
    }
  },
  computed: {
    ...mapGetters({
      options: 'types/options'
    }),
    isChoise() {
      return this.form.question_form === 1
    }
  },
  mounted() {
    this.$refs.optionsManager.refresh()
  },
  methods: {
    setAnswer(i) {
      this.form.answer = String.fromCharCode(65 + i)
    },
    async handleSubmit() {
      const graph = this.$refs.graph.file
      if (this.formOptions.useGraph && !graph) {
        this.$toast.error('图片题必须选择图片')
        return
      }
      this.submitting = true
      try {
        const form = this.isChoise ? this.form : {
          ...this.form,
          options: []
        }
        const { id } = await createQuestion(form)
        if (this.formOptions.useGraph) {
          await updateGraph(id, graph)
        }
        if (this.isChoise) {
          this.$refs.optionsManager.refresh()
        }
        this.$toast.success('创建成功')
        this.$emit('fresh')
      } catch (err) {
        this.$report(err)
      }
      this.submitting = false
    }
  }
}
</script>

<style>

</style>
